<template>
	<div class="search-wrap">
		<van-search
			v-model="value"
			placeholder="门票/酒店/餐饮等"
			:show-action="showAction"
			:disabled="true"
			:clearable="true"
			:input-align="align"
			:class="halfGray ? 'search-gray-half' : ''"
			@click="$goPage('search')"
		>
			<van-icon 
				slot="left-icon" 
				class-prefix="ucai-icon" 
				name="sousuo" 
				:class="align == 'center' && 'icon-center'" 
				color="#999" />
			<div 
				class="city-label" 
				:class="!halfGray && 'c-main font-sm'"
				slot="label" 
				v-if="showCity" 
				@click="showPopup = true"
			>
				{{ site }}优采
				<van-icon v-if="!halfGray" class-prefix="ucai-icon" name="xiasanjiao" />
				<van-icon v-if="halfGray" class="c-main" class-prefix="ucai-icon" name="more_entity" />
			</div>
		</van-search>

		<van-popup 
			v-model="showPopup"
			position="bottom"
			class="change-city"
		>
			<p class="popup-title clearfix">选择城市<span @click="showPopup = false">取消</span></p>
			<div>
				<p>当前/历史</p>
				<h4>
					<van-icon class-prefix="ucai-icon" name="zuobiao" class="c-main-gradient" />
					{{city}}
				</h4>
				<p>服务开通的城市</p>
				<van-row 
					tag="ul"  
					class="city-tags-wrap"
					type="flex" 
					justify="space-between"
				>
					<van-col 
						tag="li" 
						span="6" 
						v-for="(val, key) in cityList" 
						:key="key"
						@click="changeCity(key)"
					>
						<label :class="key == cityCode && 'bg-main-gradient'" :code="key">{{val}}</label>
					</van-col>
				</van-row>
			</div>
		</van-popup>
	</div>
</template>
<script>
	import { 
		Search, 
		Icon, 
		Popup, 
		Row, 
		Col 
	} from 'vant'
	import { getLatestCity, setLatestCity } from '@/api/modules/index'
	import { BIZ_NAME, DEF_PROVINCE_ID, DEF_CITY_ID } from '@utils/default_config';
	import SITE_AREA_LIST from '@data/site-area';
	export default {
		name: 'search-bar',
		components: {
			[Search.name]: Search,
			[Icon.name]: Icon,
			[Popup.name]: Popup,
			[Row.name]: Row,
			[Col.name]: Col,
		},
		props: {
			showAction: {
				type: Boolean,
				default: false
			},
			disabled: {
				type: Boolean,
				default: true
			},
			showCity: {
				type: Boolean,
				default: true
			},
			clearable: {
				type: Boolean,
				default: false
			},
			align: {
				type: String,
				default: 'left'
			},
			// 表示是不是全部都是灰色背景，你看首页就不是
			halfGray: {
				type: Boolean,
				default: false
			}
		},
		data () {
			return {
				value: '',
				showPopup: false,
				city: '',
				cityCode: ''
			}
		},
		computed: {
			provinceCode () {
				return DEF_PROVINCE_ID
				// TODO: 不能用下面这样的判断方式
				// let pcode = ''
				// for(let province in SITE_AREA_LIST.province_list){
				// 	if(SITE_AREA_LIST.province_list[province].replace(/省|市|自治区/, '') === BIZ_NAME.replace('优采', '')){
				// 		pcode = province
				// 	}
				// }
				// return pcode
			},
			cityList() {
				let city_list = {}
				const citys = SITE_AREA_LIST.city_list
				for(let city in citys){
					if(city.slice(0, 2) === this.provinceCode.slice(0, 2) ){
						city_list[city] = citys[city]
					}
				}
				return city_list
			},
			site() {
				return this.city.replace(/市|地区/, '')
			}
		},
		watch: {
			cityCode() {
				this.setLatest()
			}
		},
		created() {
			this.getLatest()
		},
		methods: {
			// 获取最后一次使用的城市
			getLatest() {
				// TODO: 写缓存
				getLatestCity().then(res => {
					let zone_id = res.data.zone_id
					if(!SITE_AREA_LIST.city_list[zone_id])
						zone_id = DEF_CITY_ID
					this.city = SITE_AREA_LIST.city_list[zone_id]
					this.cityCode = zone_id
					localStorage.setItem('latest_city_code', zone_id)
				})
			},
			// 设置最后一次使用的城市
			setLatest() {
				setLatestCity(this.cityCode).then(res => {
					this.$parent.city = this.city
				})
			},
			// 选中城市
			changeCity(key) {
				this.cityCode = key
				this.city = this.cityList[key]
				localStorage.setItem('latest_city_code', key)
				this.showPopup = false
				this.$emit('changeLastCity', key)
				// window.location.reload()
			}
		}
	}
</script>
<style lang="less" scoped>
	@import "~@style_m/basic/utils/index";
	.search-gray-half .van-search__content {
		padding-left: 0!important;
	}
	.search-gray-half .van-search__label {
		padding-left: 0;
	}

	.search-gray-half /deep/ .van-search__content {
    background: transparent;
  }
	.search-gray-half  /deep/ .van-field {
    padding-left: 10px;
    border-radius: @radius-default;
    background: @color-bg;
  }

	.city-label {
		position: relative;
		font-size: 18px;
		font-weight: 500;
		padding-right: 2px;
		.ucai-icon {
			font-size: 16px;
		}
		&:after {
			content: '';
			position: absolute;
			right: 0;
			top: 50%;
			height: 50%;
			width: 0;
			border-left: 1px solid @gray-9;
			transform: translateY(-50%);
		}
	}
	.search-gray-half {
	  .city-label:after {
	    display: none;
	  }
	}
	
	.icon-center {
		position: absolute;
		left: 32%;
	}

	.change-city {
		top: 0;
		font-size: @font-size-md;
		.popup-title {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			padding: 0 15px;
			height: 42px;
			line-height: 42px;
			font-size: 18px;
			text-align: center;
			color: @black;
			background: #fafafa;
			span {
				float: right;
				font-size: 15px;
				color: @gray-9;
			}
		}
		& > div {
			padding: 43px 15px 0;
			p {
				text-align: left;
				padding-top: 20px;
			}
		}
		h4 {
			padding: 15px 0 20px;
			font-size: 20px;
			line-height: 1;
			text-align: left;
			border-bottom: @border-default;
		}
		.city-tags-wrap {
			flex-wrap: wrap;
			li {
				float: inherit;
				flex: 0 0 30%;
				padding: 10px 0 5px;
				label {
					display: inline-block;
					text-align: center;
					width: 100%;
					border-radius: 5px;
					font-size: 14px;
					height: 30px;
					line-height: 30px;
					background: #f8f8f8;
				}
			}
		}
	}
</style>